<template>
  <div v-if="zanInnerVisible">
    <div
      v-if="zanInnerVisible"
      class="zanMask"
      style="position: fixed;top:0;left:0;right:0;bottom:0;opacity: .5;background: #000;z-index: -1"
    />
    <el-dialog
      id="zanusersDialog"
      :visible.sync="zanInnerVisible"
      :modal="false"
      v-if="zanInnerVisible"
      top="0"
      width="800px"
      append-to-body
      custom-class="zanusersDialog"
    >
      <template #title>
        {{ $t('m.weiyou_like') }}（{{ getUserList.length }}）
      </template>

      <div class="userList">
        <div
          v-for="(item, index) in getUserList"
          :key="index"
          class="userItem"
        >
          <div
            v-html="item.photo"
            class="headerImg"
          />
          <div class="username">
            <span class="name">{{ item.userName }}</span>
            <span class="time"> {{ item.updateTime }} </span>
          </div>
        </div>
      </div>
      <Nodata v-if="noData" />
      <div
        slot="footer"
        class="dialog-footer"
        style="text-align: center"
      >
        <el-button @click="zanInnerVisible = false">
          {{ $t('m.weiyou_close') }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getZanlist } from '../actions/actions';
import Nodata from '../../../components/noData/index';
import getMaxZindex from '../util/getZindex';

export default {
  name: 'ZanUserList',
  components: { Nodata },
  props: {
    mailObj: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      zanInnerVisible: false,
      userData: [],
      noData: false,
    };
  },
  computed: {
    getUserList() {
      this.userData.forEach((item, index) => {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.userData[index].photo = JE.getUserPhoto(item.userId, true);
      });
      return this.userData;
    },
  },
  watch: {
    zanInnerVisible(nv) {
      if (nv) {
        // 处理展示层级
        this.$nextTick(() => {
          $('#zanusersDialog').css({ 'z-index': getMaxZindex() + 2 });
          $('.zanMask').css({ 'z-index': getMaxZindex() - 1 });
          this.loadZanList();
        });
      }
    },
  },
  mounted() {
    // 人员头像处理
    const me = this;
    if (!JE.isNotEmpty(JE.__USERS__)) {
      $(document).on('mysubscrible', () => {
        me.loadZanList();
      });
    } else {
      me.loadZanList();
    }
  },
  methods: {
    loadZanList() {
      this.noData = false;
      getZanlist({ id: this.mailObj.id, limit: -1 }).then((data) => {
        if (data.success) {
          if (data.rows.length === 0) {
            this.noData = true;
          }
          this.userData = data.rows;
        }
      });
    },
  },
};
</script>
<style lang="scss">
.zanusersDialog {
  height: 600px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  .el-dialog__header {
    color: #444;
    font-weight: 500;
    font-size: 18px;
  }
  .el-dialog__body {
    height: 485px;
    overflow-y: auto;
    padding-top: 0;
    .userList {
      width: 100%;
      overflow: auto;
      position: relative;
      .userItem {
        float: left;
        width: 50%;
        overflow: hidden;
        margin-top: 10px;
        .headerImg {
          width: 36px;
          height: 36px;
          border-radius: 50%;
          overflow: hidden;
          float: left;
        }
        .username {
          float: left;
          width: 300px;
          padding-left: 10px;
          height: 45px;
          line-height: 36px;
          /* border-bottom: 1px solid rgba(236, 236, 236, 1); */
          .time {
            float: right;
          }
        }
      }
    }
    /* .userList:after {
      content: " ";
      position: absolute;
      top: 5px;
      bottom: 0;
      width: 1px;
      background: rgba(236, 236, 236, 1);
      border-radius: 1px;
      left: 50%;
      transform: translateX(-50%);
    } */
  }
}
</style>
